<!--
  * @Description: AuthTree.vue
  * @Author mofada
  * @create 2024/11/19 13:46
-->
<!--setup-->
<script setup>
import { getCurrentInstance, ref, watch, onMounted } from 'vue'

const { proxy } = getCurrentInstance()
const props = defineProps({
  treeData: {
    type: Array,
    default: () => []
  },
  currentKey: {
    type: String,
    default: ''
  }
})
const emits = defineEmits(['node-click', 'update:currentKey'])

/* 状态 */
const treeRef = ref()

/* 方法 */
function onNodeClick(data) {
  proxy.$emit('node-click', data)
  proxy.$emit('update:currentKey', data.id)
}

/* 计算 */

/* 监听 */
watch(
  () => props.currentKey,
  (val) => {
    setTimeout(() => {
      treeRef.value?.setCurrentKey(val)
    }, 0)
  }
)

/* 周期 */
onMounted(() => {
  treeRef.value?.setCurrentKey(props.currentKey)
})

/* 暴露 */
defineExpose({
  $: proxy.$
})
</script>

<!--render-->
<template>
  <el-tree
    ref="treeRef"
    :data="treeData"
    node-key="id"
    class="auth-tree h-full overflow-y-auto"
    default-expand-all
    :highlight-current="true"
    :expand-on-click-node="false"
    @node-click="onNodeClick"
  >
    <template #default="{ node, data }">
      <span
        class="truncate"
        :class="{ 'is-current': data.id === props.currentKey }"
      >{{ data.branchName }}</span>
      <span>({{ data.empCount }})</span>
    </template>
  </el-tree>
</template>

<!--style-->
<style scoped lang="less">
.auth-tree :deep(.ijep-tree-node) .ijep-tree-node__content:has(.is-current) {
  color: #2d49d1;
  background-color: #2d49d114;
}
</style>
